<app-toolbar>
    <nz-space>
        <button *nzSpaceItem nz-button nzType="primary" (click)="reload()">
            <i nz-icon nzType="reload" [nzSpin]="loading"></i>
            刷新
        </button>
        <app-search-box
            *nzSpaceItem
            (onSearch)="search($event)"
        ></app-search-box>
        <button
            *nzSpaceItem
            nz-button
            nzType="primary"
            nzDanger
            (click)="handleBatchDel()"
        >
            批量删除
        </button>
    </nz-space>
</app-toolbar>
<ng-template #totalTemplate let-total>总共 {{ total }} 条</ng-template>
<nz-table
  #basicTable
  [nzData]="datum"
  [nzLoading]="loading" 
  nzShowPagination
  nzShowSizeChanger
  [nzFrontPagination]="false"
  [nzTotal]="total"
  [nzShowTotal]="totalTemplate"
  (nzPageSizeChange)="pageSizeChange($event)"
  (nzPageIndexChange)="pageIndexChange($event)"
  [nzPageSize]="pageSize"
  [nzPageIndex]="pageIndex"
  (nzQueryParams)="onQuery($event)"
>
    <thead>
        <tr>
            <th
                [nzChecked]="checked"
                [nzIndeterminate]="indeterminate"
                (nzCheckedChange)="handleAllChecked($event)"
            ></th>
            <th nzColumnKey="id" [nzSortFn]="true">ID</th>
            <th nzColumnKey="device_id">设备</th>
            <th nzColumnKey="point">数据点位</th>
            <th nzColumnKey="value">数据</th>
            <th nzColumnKey="time" [nzSortFn]="true">日期</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr
            *ngFor="let data of basicTable.data; let i = index"
            (dblclick)="read(data)"
            [style]="{ fontWeight: data.read ? '' : 'bold' }"
        >
            <td
                [nzChecked]="setOfCheckedId.has(data.id)"
                (nzCheckedChange)="handleItemChecked(data.id, $event)"
            ></td>
            <td>{{ data.id }}</td>
            <td>{{ data.device || data.device_id }}</td>
            <td>{{ data.point }}</td>
            <td>{{ data.value }}</td>
            <td>{{ data.time | date }}</td>
            <td>
                <!-- <a (click)="read(data)">
                    <i nz-icon nzType="eye"></i>
                </a>
                <nz-divider nzType="vertical"></nz-divider> -->
                <a (click)="delete(data.id)">
                    <i nz-icon nzType="delete"></i>
                </a>
            </td>
        </tr>
    </tbody>
</nz-table>
